<template>
	<div class="homePageContent">
		<!--title-->
		<div class="home_title fix">
			<router-link to="/city" class="home_location fl fix">
				<img class="home_location_img" src="../assets/image/ico_homelocation@2x.png">
				<p class="home_location_p" :id="nowCity.id">{{nowCity.name}}</p>
			</router-link>
			<router-link to="/search" class="home_search fl fix">
				<img class="home_search_img" src="../assets/image/ico_seach@2x.png">
				<p class="home_search_p">连衣裙</p>
			</router-link>
			<router-link to="/classification" class="home_news fr">
				<img class="home_news_img" src="../assets/image/classify@2x.png">
			</router-link>
		</div>
		<!--banner-->
		<div class="home_banner" :class="homeBanner" v-if="bannerIntegralLi.banner &&  bannerIntegralLi.banner.length > 0">
			<mt-swipe :auto="4000">
				<mt-swipe-item v-for="item in bannerIntegralLi.banner" :key="item.img"><router-link :to='{path: "commodityDetail", query: {spu: item.imageLinkID}}'><img class="home_banner_img" :src="item.imageUrl"></router-link></mt-swipe-item>
			</mt-swipe>
		</div>
		<!--积分商城-->
		<div class="home_integralshoppingmall" :class="homeIntegralshoppingmall" v-if="bannerIntegralLi.goods &&  bannerIntegralLi.goods.length > 0">
			<div class="com_title fix">
				<p class="com_p">积分商城</p>
				<router-link to="/integralShoppingMall" class="com_enter fix"><img class="com_enter_img" src="../assets/image/ico_enter@2x.png"><p class="com_enter_p">去逛逛</p></router-link>
			</div>
			<div class="integral_main">
				<ul>
					<li class="integral_li fix" v-for="item in bannerIntegralLi.goods" :en="item.sku">
						<router-link :to='{path: "integralCommodityDetail", query: {spu: item.spu}}'>
							<img class="integral_img fl" :src="item.imageUrl">
							<div class="integral_right fl">
								<p class="integral_name">{{item.goodsName}}</p>
								<p class="integral_price fix">
									<span class="integral_sapn1 fl">￥{{item.shopPrice}}+</span><span class="integral_sapn2 fl">{{item.point}}积分</span>
								</p>
								<p class="integral_lastprice">抵扣前￥{{item.marketPrice}}</p>
							</div>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
		<!--活动-->
		<div class="home_activity" :class="homeActivity" v-if="activityLi.length > 0">
			<div class="com_title fix">
				<p class="com_p">精选好活动</p>
			</div>
			<div class="activity_main fix">
				<router-link v-if="activityLi[0].imageLinkType !== 2" :to="activityLi[0].path" class="activity_le fl"><img class="activity_le_img" :src="activityLi[0].imageUrl"></router-link>
				<a v-else :href="activityLi[0].path" class="activity_le fl"><img class="activity_le_img" :src="activityLi[0].imageUrl"></a>
				<div class="activity_ri fr">
					<ul>
						<li>
							<router-link v-if="activityLi[1].imageLinkType !== 2" :to="activityLi[1].path"><img class="activity_ri_img" :src="activityLi[1].imageUrl "></router-link>
							<a v-else :href="activityLi[1].path" class="activity_ri fl"><img class="activity_ri_img" :src="activityLi[1].imageUrl"></a>
						</li>
						<li>
							<router-link v-if="activityLi[2].imageLinkType !== 2" :to="activityLi[2].path" ><img class="activity_ri_img" :src="activityLi[2].imageUrl"></router-link>
							<a v-else :href="activityLi[1].path" class="activity_ri fl"><img class="activity_ri_img" :src="activityLi[2].imageUrl"></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--特价-->
		<div class="home_sale" :class="homeSale" v-if="saleLi.rows &&  saleLi.rows.length > 0">
			<div class="com_title fix">
				<p class="com_p">每日特价</p>
				<div class="com_hot fl"><img class="com_hot_img" src="../assets/image/label_hot@2x.png"></div>
				<div to="/" class="com_enter fix"><img class="com_enter_img" src="../assets/image/ico_enter@2x.png"><p class="com_enter_p">每日<span class="com_enter_span">11点</span>更新</p></div>
			</div>
			<div class="sale_main">
				<ul class="salelist">
					<li class="saleli" v-for="item in saleLi.rows">
						<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
							<img class="saleimg" :src="item.imageUrl">
							<div class="saledescribe">{{item.goodsName}}</div>
							<div class="saleprice">￥{{item.shopPrice}}</div>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
		<!--专题-->
		<div class="home_subject" :class="homeSubject" v-if="subjectLi.length > 0">
			<div class="com_title fix">
				<p class="com_p">专题推荐</p>
				<!-- <router-link to="/" class="com_enter fix"><img class="com_enter_img" src="../assets/image/ico_enter@2x.png"><p class="com_enter_p">查看更多专题</p></router-link> -->
			</div>
			<div class="subject_main">
				<ul>
					<li v-for="item in subjectLi">
						<div class="subject_banner">
							<router-link :to="{name: 'activityPart', query: {subjectID: item.id}}">
								<img class="subject_banner_img" :src="item.subjectBanner">
							</router-link>
						</div>
						<dl class="subject_list fix">
							<dt class="subject_list_enter"><img class="subject_list_enter_img" src="../assets/image/btn_more@2x.png"></dt>
							<dd v-for="product in item.goods" :lang="product.brandID"><router-link :to='{path: "commodityDetail", query: {spu: product.spu}}'><img class="subject_goods_img" :src="product.imageUrl"><p class="subject_goods_p">{{product.goodsName}}</p><span class="subject_goods_span">￥{{product.shopPrice}}</span></router-link></dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		<!--热门-->
		<div class="home_hot" :class="homeHot" v-if="hotLi.rows &&  hotLi.rows.length > 0">
			<div class="com_title fix">
				<p class="com_p">热门商品</p>
			</div>
			<div class="hot_main">
				<ul class="fix">
					<li v-for="item in hotLi.rows">
						<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
							<img class="hot_img" :src="item.imageUrl">
							<div class="hot_describe">
								<p class="hot_describe_p">{{item.goodsName}}</p>
								<span class="hot_describe_span">￥ {{item.shopPrice}}</span>
								<img class="hot_describe_img" :lang="item.follow" src="../assets/image/ico_shopping-car@2x.png">
							</div>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
		<!--没有更多-->
		<div class="home_nomore">没有更多了哦~</div>
		<login></login>
		<cfooter pageType='index'></cfooter>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'
import login from './login'
import cfooter from '../components/footer'
import { Swipe, SwipeItem } from 'mint-ui'
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)

export default {
	name: 'app',
	data () {
		return {
			bannerIntegralLi:[],
			activityLi:[],
			saleLi:[],
			subjectLi:[],
			hotLi:[],
			type:0,
			categoryId:'',
			pageNo: '1',
			getcity: '',
			getcityid: '',
			nowCity: '',
			path: '',
			homeBanner: '',
			homeIntegralshoppingmall: '',
			homeActivity: '',
			homeSale: '',
			homeSubject: '',
			homeHot: ''
		}
	},
	components: {
		login,
		cfooter
	},
	beforeMount:function () {
		this.$store.getters.getIsUser || this.$store.commit('upIntegral', {integral: true});
		this.$nextTick(function () {
			this.getData();
		});
	},
	beforeCreate:function () {
		this.$nextTick(function () {
			this.getLocalStorage();
			this.indexView();
		});
	},
	methods:{
		getLocalStorage:function () {
			this.getcity = window.localStorage.getItem('getcity');
			this.getcityid = window.localStorage.getItem('getcityid');
		},
		indexView:function () {
			let _this = this;
			var lat, lng;
			_this.nowCity = {};
			if(localStorage.getItem("getcity")) {
				_this.nowCity.name = localStorage.getItem("getcity")
				_this.nowCity.id = localStorage.getItem("getcityid")
			} else {
				let geocoder = new qq.maps.Geocoder();
				citylocation = new qq.maps.CityService({
					complete : function(result){
						lat = result.detail.latLng.lat;
						lng = result.detail.latLng.lng;
						//对指定地址进行解析
						geocoder.getAddress(new qq.maps.LatLng(lat,lng));
					}
				});
				citylocation.searchLocalCity();
				geocoder.setComplete(function(result) {
					let ncity = result.detail.addressComponents.city;
					for(let i = 0, len = city.length; i < len; i++) {
						if(ncity.match(city[i].name)) {
							_this.nowCity = {};
							_this.nowCity.name = city[i].name;
							_this.nowCity.id = city[i].id;
						}
					}
				});
				geocoder.setError(function() {
					console.log("出错了！！！");
				});
			}
		},

		getData: function() {
			let _this = this;
			// banner 积分
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/index/plate_weixin").then(function (res) {
				_this.bannerIntegralLi = res.body.content;
			});
			// 首页精选活动
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/index/plate/featured").then(function (res) {
				_this.activityLi = res.body.content;
				for(let i = 0, len = _this.activityLi.length; i < len; i++) {
					switch (_this.activityLi[i].imageLinkType) {
						//专题
						case 0 :
						 	_this.activityLi[i].path = {name: "activityPart", params: {subjectID: _this.activityLi[i].imageLinkID}};
						 	break;
						//活动
						case 1 :
						 	_this.activityLi[i].path = {name: "activityPart"};
						 	break;
						//链接
						case 2 :
						 	_this.activityLi[i].path = _this.activityLi[i].imageLinkID;
						 	break;
						//商品
						case 3 :
						 	_this.activityLi[i].path = {name: "commodityDetail", query: {spu: _this.activityLi[i].imageLinkID}};
						 	break;
						//分类
						case 4 :
						 	_this.activityLi[i].path = {name: "classification", params: {parentID: _this.activityLi[i].imageLinkID}};
						 	break;
						//附近门店
						case 5 :
							_this.activityLi[i].path = {name: "recommendStore", params: {storeID: _this.activityLi[i].imageLinkID}};
						 	break;
						//特卖
						case 6 :
						 	_this.activityLi[i].path = {name: "recommendStore", params: {storeID: _this.activityLi[i].imageLinkID}};
						 	break;
						//品牌街
						case 7 :
							_this.activityLi[i].path = {name: "recommendStore", params: {storeID: _this.activityLi[i].imageLinkID}};
							break;
				 	}
			 	};
			});
			// 特价
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/index/plate/special").then(function (res) {
				_this.saleLi = res.body.content;
			});
			// 专题
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/index/plate/subject").then(function (res) {
				_this.subjectLi = res.body.content;
			});
			// 热门
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/index/plate/hotGoods/"+this.pageNo).then(function (res) {
				_this.hotLi = res.body.content;
			});
		}
	}
}
</script>
<style lang="scss">
.homePageContent{
	background: #fff;
	// 公共标题
	.com_title{
		padding: 0 0.3rem; height: 0.88rem; line-height: 0.88rem;
		.com_p{ float: left; font-size: 0.32rem; color: #151517; }
		.com_hot{ padding: 0.32rem 0 0 0.1rem; }
		.com_hot_img{ display: block; width: 0.44rem; height: 0.28rem; }
		.com_enter{ float: right; padding-top: 0.36rem; }
		.com_enter_img{ display: block; float: right; width: 0.1rem; height: 0.18rem; }
		.com_enter_p{ float: right; margin: -0.05rem 0.14rem 0 0; height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #c0c0c0; }
		.com_enter_span{ font-size: 0.24rem; color: #ff6f8b; }
	}
	// 修改swipe
	.mint-swipe,.mint-swipe-items-wrap{
		overflow: hidden; position: relative; height: 100%;
		.mint-swipe-items-wrap{
			div{ position: absolute; -webkit-transform: translateX(-100%); transform: translateX(-100%); width: 100%; height: 100%; display: none; }
			.is-active{ display: block; -webkit-transform: none; transform: none; }
		}
	}
	.mint-swipe-indicators{
		height: 0.06rem; position: absolute; bottom: 0.1rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
		.mint-swipe-indicator{ float: left; width: 0.06rem; height: 0.06rem; background: #fff; opacity: 1; margin: 0 0.08rem; border-radius: 100%; }
		.is-active{ width: 0.2rem; background: #f05274; }
	}
	// title
	.home_title{
		padding: 0.14rem 0.3rem 0; width: 6.9rem; height: 0.74rem; background: #fff; border-bottom: 2px solid #f1f1f1; position: fixed; left: 0; top: 0; z-index: 10;
		.home_location{ padding-top: 0.1rem; width: 1.31rem; }
		.home_location_img{ float: left; width: 0.4rem; height: 0.4rem; }
		.home_location_p{ float: left; padding-left: 0.1rem; line-height: 0.4rem; font-size: 0.28rem; color: #151517; }
		.home_search{ width: 4.78rem; height: 0.6rem; background: #f3f3f3; border-radius: 0.3rem; }
		.home_search_img{ float: left; padding: 0.16rem 0.1rem 0 0.3rem; width: 0.28rem; height: 0.28rem; }
		.home_search_p{ float: left; line-height: 0.6rem; font-size: 0.28rem; color: #c0c0c0; }
		.home_news{ padding-top: 0.12rem; }
		.home_news_img{ display: block; width: 0.38rem; height: 0.38rem; }
	}
	// banner
	.home_banner{
		padding-top: 0.9rem; width: 100%; height: 3.3rem;
		.mint-swipe-items-wrap>div{ line-height: 3.3rem; text-align: center; background: #ccc; }
		.home_banner_img{ display: block; width: 7.5rem; height: 3.3rem; }
	}
	// 积分商城
	.home_integralshoppingmall{
		width: 100%; border-bottom: 0.3rem solid #f4f5f5;
		.integral_main{
			padding: 0 0.3rem;
			.integral_li{ padding-bottom: 0.3rem; height: 2.26rem; }
			.integral_img{ width: 2.26rem; height: 2.26rem; }
			.integral_right{ padding-left: 0.3rem; width: 4.34rem; height: 2.26rem; }
			.integral_name{ margin: 0 auto; padding-top: 0.28rem; height: 0.84rem; line-height: 0.42rem; font-size: 0.22rem; color: #3e3e3e; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; overflow: hidden; text-overflow: ellipsis; }
			.integral_price{ padding: 0.16rem 0 0 0; height: 0.32rem; }
			.integral_sapn1{ line-height: 0.32rem; font-size: 0.32rem; color: #ff365d; }
			.integral_sapn2{ display: block; width: 0.98rem; height: 0.28rem; line-height: 0.28rem; text-align: center; font-size: 0.2rem; color: #fff; background: #ff365d; }
			.integral_lastprice{ padding: 0.16rem 0 0 0; height: 0.22rem; line-height: 0.22rem; font-size: 0.22rem; color: #999; }
		}
	}
	// 活动
	.home_activity{
		border-bottom: 0.3rem solid #f4f5f5;
		.activity_main{
			margin: 0 0.3rem 0.3rem; height: 3.76rem; border: 1px solid #f1f1f1;
			.activity_le{ width: calc(100%/2 - 1px); height: 100%; border-right: 1px solid #f1f1f1; position: relative; }
			.activity_le_img{ display: block; width: 3.4rem; height: 3.76rem; position: absolute; right: 0; top: 0; z-index: 0; }
			.activity_ri{
				width: calc(100%/2); height: 100%;
				li{
					width: 100%; height: 1.87rem; position: relative;
					+li{ border-top: 1px solid #f1f1f1; }
					a{ display: block; height: 1.87rem; }
				}
			}
			.activity_ri_img{ display: block; width: 3.4rem; height: 1.87rem; position: absolute; right: 0; top: 0; z-index: 0; }
		}
	}
	// 特价
	.home_sale{
		border-bottom: 0.3rem solid #f4f5f5;
		.sale_main{
			height: 2.57rem;
			.salelist{ overflow-x: auto; white-space: nowrap; }
			.saleli{ display: inline-block; padding: 0 0.3rem; width: 1.5rem; }
			.saleimg{ display: block; padding: 0.2rem 0.12rem; width: 1.26rem; height: 1.26rem; }
			.saledescribe{ height: 0.24rem; line-height: 0.22rem; font-size: 0.22rem; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
			.saleprice{ padding-top: 0.12rem; height: 0.32rem; line-height: 0.32rem; text-align: center; font-size: 0.32rem; color: #ff365d; }
		}
	}
	// 专题
	.home_subject{
		border-bottom: 0.3rem solid #f4f5f5;
		.subject_main{
			padding: 0 0.3rem;
			.subject_banner{ width: 100%; height: 3.6rem; }
			.subject_banner_img{ display: block; width: 6.9rem; height: 3.6rem; }
			.subject_list{
				padding: 0.2rem 0.2rem 0; height: 2.35rem;
				dd{ float: left; width: 1.5rem; }
				dd+dd{ margin-left: 0.38rem; }
			}
			.subject_list_enter{ float: right; width: 0.88rem; height: 2rem; }
			.subject_list_enter_img{ display: block; width: 0.88rem; height: 2rem; }
			.subject_goods_img{ display: block; width: 1.5rem; height: 1.56rem; }
			.subject_goods_p{ padding: 0.1rem 0 0 0.04rem; height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #909090; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
			.subject_goods_span{ display: block; padding: 0.1rem 0 0 0.04rem; height: 0.2rem; line-height: 0.2rem; font-size: 0.2rem; color: #ff365d; }
		}
	}
	// 热门
	.home_hot{
		.hot_main{
			padding: 0 0.3rem;
			li{ margin-bottom: 0.3rem; width: 3.3rem; height: 5.4rem; }
			li:nth-child(odd){ float: left; }
			li:nth-child(even){ float: right; }
			.hot_img{ display: block; width: 3.3rem; height: 3.3rem; }
			.hot_describe{ width: 3.26rem; height: 2.08rem; border: 1px solid #f0f0f0; border-top: none; position: relative; }
			.hot_describe_p{ padding: 0.3rem 0.3rem 0; height: 0.84rem; line-height: 0.42rem; font-size: 0.28rem; color: #3e3e3e; overflow: hidden; text-overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2;word-wrap:break-word;}
			.hot_describe_span{ display: block; height: 0.32rem; line-height: 0.32rem; font-size: 0.32rem; color: #ff365d; position: absolute; left: 0.3rem; bottom: 0.28rem; }
			.hot_describe_img{ display: block; width: 0.28rem; height: 0.28rem; position: absolute; right: 0.3rem; bottom: 0.3rem; }
		}
	}
	// 没有更多
	.home_nomore{ width: 100%; height: 1.66rem; line-height: 0.62rem; text-align: center; font-size: 0.22rem; color: #a5a5a5; background: #f4f5f5; }
}
</style>